import type { App } from 'vue'

import {
    ElButton, ElContainer, ElAside, ElHeader, ElMain, ElFooter, ElMenu, ElMenuItemGroup, ElMenuItem, ElForm, ElFormItem, ElInput, ElPopover, ElTag, ElCard, ElTable, ElTableColumn, ElPagination, ElDialog, ElPopconfirm, ElUpload, ElLoading, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCascader, ElCheckbox, ElMessage, ElSubmenu, ElBreadcrumb, ElBreadcrumbItem, ElRow, ElCol, ElMessageBox
} from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

// 组件列表
const components = [ElButton, ElForm, ElFormItem, ElInput, ElTag, ElDialog, ElCheckbox, ElContainer, ElAside, ElHeader, ElMain, ElFooter, ElMenu, ElMenuItemGroup, ElMenuItem, ElPopover, ElCard, ElTable, ElTableColumn, ElPagination, ElPopconfirm, ElUpload, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCascader, ElSubmenu, ElBreadcrumb, ElBreadcrumbItem, ElRow, ElCol,]

// 插件列表
const plugins = [ElLoading, ElMessage, ElMessageBox]

// 暴露出useElementPlus方法，给vue实例调用
export function useElementPlus(app: App<Element>) {
  components.forEach((component) => {
    app.component(component.name, component)
  })
  plugins.forEach((plugin: any) => {
    app.use(plugin)
  })
}